<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns:th="" lang="zh-CN">
<%@include file="/WEB-INF/pages/base/include.jsp"%>
<body>
<div id="wrapper">
    <%@include file="/WEB-INF/pages/base/menu.jsp"%>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">广告区管理</h3>
            </div>
        </div>
        <div class="row">
            <form class="form-horizontal" data-parsley-validate>
                <div class="col-lg-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">广告区基本信息</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                   <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">位置区域选择：</label>
                                        <div class="col-lg-8">
	                                        <select class="form-control" id="typeList">
					                             <option value="1">上</option>
					                             <option value="2">中</option>
					                             <option value="3">下</option>
                                            </select>
                                    	</div>
                                    	<div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须选择</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                         <label class="col-lg-2 clo-md-2 control-label">图片1（尺寸： 538*760）：</label>
                                         <div class="col-lg-8">
                                             <p><img id="image1" src="" width="500px"></p>
                                             <button class="btn btn-default" id="photoUpload_1">上传图片</button>
                                         </div>
                                    </div>
                                   	<div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">图1链接：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="url1" class="form-control"
                                                   placeholder="请输入图1链接">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                         <label class="col-lg-2 clo-md-2 control-label">图片2（尺寸： 538*378）：</label>
                                         <div class="col-lg-8">
                                             <p><img id="image2" src="" width="500px"></p>
                                             <button class="btn btn-default" id="photoUpload_2">上传图片</button>
                                         </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">图2链接：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="url2" class="form-control"
                                                   placeholder="请输入图2链接">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                         <label class="col-lg-2 clo-md-2 control-label">图片3（尺寸： 538*378）：</label>
                                         <div class="col-lg-8">
                                             <p><img id="image3" src="" width="500px"></p>
                                             <button class="btn btn-default" id="photoUpload_3">上传图片</button>
                                         </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">图3链接：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="url3" class="form-control"
                                                   placeholder="请输入图3链接）">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" class="btn btn-primary" onclick="mallBanner_create()"
                        style="margin-left:15px;margin-bottom:30px;">保存
                </button>
                <button class="btn btn-default" id="cancel" style="margin-left:15px;margin-bottom:30px;">
                    取消
                </button>
            </form>
        </div>
    </div>
</div>
<script>

	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_1'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_1').text('上传中...');
		        $('#photoUpload_1').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#image1").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_1').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_2'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_2').text('上传中...');
		        $('#photoUpload_2').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#image2").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_2').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	(function(){
		var ajaxUpload = new AjaxUpload($('#photoUpload_3'), {
		    action: '${webPath}/file/uploadImage',
		    data: {
		        "json_package": JSON.stringify({
		            "head": {},
		            "body": {"file": "file"}
		        })
		    },
		    name: 'file',
		    onSubmit: function (file, ext) {
		        window.uploading = true;
		        $('#photoUpload_3').text('上传中...');
		        $('#photoUpload_3').attr('disabled', true);
		        this.disable();
		
		    },
		    onChange: function (file, extension) {
		        this.disable();
		    },
		    onComplete: function (file, response) {
		    	var data = JSON.parse(response);
		    	fileUrl = data.body.fileUrl;
		    	$("#image3").attr('src',fileUrl); 
		        window.uploading = false;
		        $('#photoUpload_3').text('上传图片');
		        this.enable();
		    }
		});
	})();
	
	function mallBanner_create() {
    	var baseURL = "${webPath}/advertisement/create";
        var type = $("#typeList").find("option:selected").val();
        var image1 = $("#image1")[0].src; 
        var image2 = $("#image2")[0].src; 
        var image3 = $("#image3")[0].src; 
        var url1 = $('#url1').val();
        var url2 = $('#url2').val();
        var url3 = $('#url3').val();
        
        var json_package = {
       		"head": {},
            "body": {
            	"image1": image1,
                "image2": image2,
                "image3": image3,
                "type": type,
                "url1": url1,
                "url2": url2,
                "url3": url3
            }
        };
        $.post(baseURL, {"json_package": JSON.stringify(json_package)}, function (result) {
            if (typeof result == 'string') result = JSON.parse(result);
            if (result.body.result == '0') {
                alert(result.body.description)
                window.location.href="${webPath}toAdvertisementEdit/"+result.body.advertisementId;
            } else {
            	alert(result.body.description)
            }
        })
    }
    $(function () {
        $('#cancel').click(function () {
            window.location.href = "${webPath}toAdvertisement";
        })
    });
</script>
</body>
</html>